<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        img {
            vertical-align: top;
        }
        
        .main {
            margin: 0 auto 0;
            width: 1000px;
        }
        
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

    <script src="../jQuery版本/jquery-3.6.0.js"></script>
    <script>
        $(function() {
            var navh = $('.nav').height();
            $(window).scroll(function() {
                var scrollTopValue = $(window).scrollTop();
                if (scrollTopValue >= $('#topPart').height()) {
                    $('.nav').css({
                        position: 'fixed',
                        top: 0,
                        left: 0
                    })
                    $('.main').css({
                        marginTop: navh
                    })
                } else {
                    $('.nav').css({
                        position: 'static',
                        top: 0,
                        left: 0
                    })
                    $('.main').css({
                        marginTop: 0
                    })
                };
            });
        })
    </script>

</head>

<body>
    <div class="top" id="topPart">
        <img src="images/top.png" alt="" />
    </div>
    <div class="nav" id="navBar">
        <img src="images/nav.png" alt="" />
    </div>
    <div class="main" id="mainPart">
        <img src="images/main.png" alt="" />
    </div>
</body>

</html>